<template>
  <view :class="[ns.b, disabled && 'is-disabled', modelValue && 'is-active']" @click="change">
    <Button :class="[ns.e('change')]" :disabled="disabled">
      <view class="iconfont icon-select" :class="[ns.e('change-icon')]" v-for="_ in 3"></view>
    </Button>
    <view :class="[ns.e('content')]">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useNamespace } from '@/utils'
import Checkbox from '.'
import Button from '@/components/button/index.vue'

defineOptions({
  name: Checkbox.name
})
const props = defineProps(Checkbox.props)
const emits = defineEmits(Checkbox.emits)
const ns = useNamespace(Checkbox.name)

function change() {
  if (props.disabled) return

  const val = !props.modelValue
  emits('update:modelValue', val)
  emits('change', val)
}
</script>